<%--
  Created by IntelliJ IDEA.
  User: Purif
  Date: 2020/9/13
  Time: 12:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <title>Title</title>
    <link type="text/css" href="${pageContext.request.contextPath}/static/layui-v2.5.6/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
行业职位
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<%=request.getContextPath()%><br>

<%--模态框--%>
<div id="modleBox" style="display: none; margin: auto">
    <form action="${pageContext.request.contextPath}/tradepost/insertOne" method="post">
        职位名称:<input type="text" name="name"/><br>
        当前所在类别:<input type="text" name="category"/><br>
        所属类别:<input type="text" name="fcategory"><br>

        <fieldset class="layui-elem-field site-demo-button" style="margin: auto; border: solid 0px">
            <div style="margin-left: 160px">
                <button type="submit" class="layui-btn layui-btn-normal">提交</button>
            </div>
        </fieldset>
    </form>
</div>


<table class="layui-hide" id="tradepost" lay-filter="tradepost"></table>
<script src="${pageContext.request.contextPath}/static/layui/layui.all.js" charset="utf-8"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>
<script type="text/html" id="btnDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script>

    function findAll() {
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#tradepost'
            , url: '/tradepost/all'//就是他
            , toolbar: '#btnDemo'//开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [[
                {checkbox: true, fixed: true}
                ,{field:'tid', title: 'ID', width:100, sort: true, fixed: true}
                ,{field:'name', title: '职位名称', width:150,edit:'text'}
                ,{field:'category', title: '当前所在类别', width:150, sort: true,edit:'text'}
                ,{field:'fcategory', title: '所属类别', width:150,edit:'text'}
                ,{field:'right', title: '操作', width:200,align:'center', toolbar: '#barDemo'}
            ]]
            , page: true
        });
    }

    layui.use('table', function () {
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#tradepost'
            , url: '/tradepost/all'//就是他
            , toolbar: '#btnDemo'//开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [[
                {checkbox: true, fixed: true}
                ,{field:'tid', title: 'ID', width:100, sort: true, fixed: true}
                ,{field:'name', title: '职位名称', width:150,edit:'text'}
                ,{field:'category', title: '当前所在类别', width:150, sort: true,edit:'text'}
                ,{field:'fcategory', title: '所属类别', width:150,edit:'text'}

                ,{field:'right', title: '操作', width:200,align:'center', toolbar: '#barDemo'}
            ]]
            , page: true
        });

        //监听工具条
        table.on('tool(tradepost)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                //alert(data.jid);
                $.ajax({
                    type: "POST",
                    url: "/tradepost/updateOne",
                    data: {
                        tid: data.tid,
                        name: data.name,
                        category: data.category,
                        fcategory: data.fcategory,
                    },
                    success: function (mess) {
                        //alert(mess);
                    }
                });
            }
        });



        //监听头工具栏事件
        table.on('toolbar(tradepost)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            if (obj.event === 'del') {
                var idArry = "idArry=" + data[0].tid;
                for (var i = 1; i < data.length; i++) {
                    idArry += "," + data[i].tid;
                }
                $.ajax({
                    type: "GET",
                    url: "/tradepost/delete",
                    data: idArry,
                    success: function (mess) {
                        // alert(mess);
                        // window.location = mess;
                        findAll();
                    }

                });
            } else if (obj.event === 'add') {
                layui.use(['layer'], function () {
                    var layer = layui.layer, $ = layui.$;
                    layer.open({
                        type: 1
                        , area: ['400PX', '300PX']
                        , content: $('#modleBox')
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        , zIndex: layer.zIndex
                        , yes: function () {
                            layer.closeAll();
                        }
                    });

                });
            }
        });

    });

</script>
</body>
</html>
